<template>
  <div class="content">
    <div id="mountNode"></div>
  </div>
</template>

<script>
import Heatmap from 'heatmap.js'


export default{
  data() {
    return {

    }
  },
  methods: {

  },
  mounted() {

     // 创建一个heatmap实例对象
    // “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
    // 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
    var heatmapInstance = Heatmap.create({
        container: document.querySelector('#mountNode'),
        // canvas: document.querySelector('#heatmap'), // 其实还可以传canvas对象，看一下源码就知道了，源码很显而易见，代码不多，逻辑清晰，有那么一丝丝感觉有些地方写的不好
        backgroundColor: '#fff',
        gradient: { // 数值为[0,1]，数值大的在光圈内侧，数值相等则靠下的生效，数值设置不分大小顺序，并可以同时设置很多颜色
            '0': 'blue',
            '0.2': 'blue',
            '0.4': 'green',
            '0.6': 'green',
            '0.8': 'yellow',
            '1': 'red'
        },
        // radius: 40, // 设置光圈的半径大小，值>=0,=0取得是默认值
        // opacity: 0.7, // 光圈透明度设置[0,1]，如果值设置了，会重写maxOpacity和minOpacity的值
        maxOpacity: .5, minOpacity: 0,
        // blur: .9
    });
    //构建一些随机数据点,这里替换成你的业务数据
    var points = [];
    var max = 0;
    var width = 600;
    var height = 400;
    var len = 200;
    while (len--) {
        var val = Math.floor(Math.random() * 100);
        max = Math.max(max, val);
        var point = {
            x: Math.floor(Math.random() * width),
            y: Math.floor(Math.random() * height),
            value: val
        };
        points.push(point);
    }
    var data = {
        max: max,
        data: points
    };
     //因为data是一组数据,web切图报价所以直接setData
    heatmapInstance.setData(data); //数据绑定还可以使用


}}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 800px;
  height: 700px;
  #mountNode {
    border: 1px solid #ccc;
    width: 800px;
    height: 700px;
  }
}
</style>
